<template>
  <div class="app-container" style="display: flex; justify-content: center">
    <div style="width: 1000px" v-if="info.baseInfo">
      <div class="title" style="text-align: center">{{ tableTitle }}</div>
      <div class="title">基本信息</div>
      <el-descriptions :column="3" border>
        <el-descriptions-item label="部门">
          {{ JSON.parse(info.baseInfo.dept).departmentLabel }}
        </el-descriptions-item>
        <el-descriptions-item label="工号">
          {{ info.baseInfo.code }}
        </el-descriptions-item>
        <el-descriptions-item label="姓名">
          {{ info.baseInfo.name }}
        </el-descriptions-item>
        <el-descriptions-item label="性别">
          {{ info.baseInfo.sex }}
        </el-descriptions-item>
        <el-descriptions-item label="出生年月">
          {{ info.baseInfo.birthday }}
        </el-descriptions-item>
        <el-descriptions-item label="民族">
          {{ info.baseInfo.nation }}
        </el-descriptions-item>
        <el-descriptions-item label="籍贯">
          {{ info.baseInfo.native }}
        </el-descriptions-item>
        <el-descriptions-item label="出生地">
          {{ info.baseInfo.birthplace }}
        </el-descriptions-item>
        <el-descriptions-item label="参加工作时间">
          {{ info.baseInfo.work_time }}
        </el-descriptions-item>
        <el-descriptions-item label="政治面貌">
          {{ info.baseInfo.political }}
        </el-descriptions-item>
        <el-descriptions-item label="入党时间">
          {{ info.baseInfo.party_time }}
        </el-descriptions-item>
        <el-descriptions-item label="职称">
          {{ info.baseInfo.professional }}
        </el-descriptions-item>
        <el-descriptions-item label="学历">
          {{ info.baseInfo.education }}
        </el-descriptions-item>
        <el-descriptions-item label="学历">
          {{ info.baseInfo.education }}
        </el-descriptions-item>
        <el-descriptions-item label="学位">
          {{ info.baseInfo.degree }}
        </el-descriptions-item>
        <el-descriptions-item label="专业">
          {{ info.baseInfo.major }}
        </el-descriptions-item>
        <el-descriptions-item label="毕业院校">
          {{ info.baseInfo.school }}
        </el-descriptions-item>
        <el-descriptions-item label="工作单位及职务">
          {{ info.baseInfo.unit_position }}
        </el-descriptions-item>
        <el-descriptions-item label="任现职时间">
          {{ info.baseInfo.position_time }}
        </el-descriptions-item>
        <el-descriptions-item label="现任职级">
          {{ info.baseInfo.position_rank }}
        </el-descriptions-item>
        <el-descriptions-item label="联系电话">
          {{ info.baseInfo.phone }}
        </el-descriptions-item>
      </el-descriptions>
      <div class="title">廉政档案</div>
      <el-table :data="info.docs" border>
        <el-table-column label="填报年份" prop="fillYear" width="120" />
        <el-table-column label="姓名" prop="name" />
        <el-table-column label="政治面貌" prop="political" />
        <el-table-column label="职称" prop="professional" />
        <el-table-column label="职务职级" prop="rank" />
        <el-table-column label="操作" prop="rank" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="print(scope.row)"
              >打印预览</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="title">奖励情况</div>
      <el-table :data="info.reward" border>
        <el-table-column label="奖励时间" prop="year" width="120" />
        <el-table-column label="奖励部门" width="180">
          <template slot-scope="scope">
            {{ JSON.parse(scope.row.dept).deptName }}
          </template>
        </el-table-column>
        <el-table-column label="奖励名称" prop="name" />
        <el-table-column label="奖励原由" prop="political" />
      </el-table>
      <div class="title">处罚情况</div>
      <el-table :data="info.punish" border>
        <el-table-column label="处罚时间" prop="year" width="120" />
        <el-table-column label="处罚部门" width="180">
          <template slot-scope="scope">
            {{ JSON.parse(scope.row.dept).deptName }}
          </template>
        </el-table-column>
        <el-table-column label="处罚名称" prop="name" />
        <el-table-column label="处罚原由" prop="political" />
      </el-table>
    </div>
  </div>
</template>

<script>
import { getPersonalDocBaseInfo } from "@/api/app/personal";

export default {
  name: "index",
  data() {
    return {
      tableTitle: "个人档案",
      info: {},
    };
  },
  created() {
    this.getBaseInfo();
    if (this.$route.params.userName) {
      this.tableTitle = "职工档案";
    }
  },
  methods: {
    getBaseInfo() {
      const userName = this.$route.params.userName
        ? this.$route.params.userName
        : this.$store.state.user.userName;
      getPersonalDocBaseInfo(userName).then((res) => {
        this.info = res.data;
      });
    },
    print(row) {
      window.open(
        `${process.env.VUE_APP_BASE_API}/ureport/pdf/show?_u=file:${'lianzhengdangan.ureport.xml'}&_p=1&id=${row.id}`
      );
    },
  },
};
</script>

<style scoped>
.title {
  margin: 20px 0 10px 0;
  color: #333333;
  font-weight: bold;
  font-size: 16px;
}
</style>
